<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>

    <div class="demo">
        <li v-for="(v,k) in comments">
        {{v.id}}——{{v.content}}
        <button @click="removeA(k)">删除</button>
        </li>
        <!-- <textarea rows="10" cols="20" v-model="current"></textarea><br/>
        <button @click="pushA('first')">在数据前面增加</button>
        <button @click="pushA('last')">在数据后面增加</button>
        <br>
        <button @click="delA('first')">删除第一个数据</button>
        <button @click="delA('last')">删除最后一个数据</button>
        <br>
        <button @click="sortA">降序排序</button>
        <br>
        <button @click="reverseA">数据反转</button>
        <br> -->
        <button @click="alldelA">删除所有数据</button>
    </div>
    <!-- <div id="app">
      <div class="seen" v-if="seen">
       eeee
        <li v-for="eas in sites">{{eas.text}}</li>
      </div>
      <input red="hasFocus" id="seFocus" type="text"  class="seen"/>
    </div> -->
  </div>
</template>


<script>
import Vue from 'vue'
import Vuex from 'vuex'
export default {
  name: 'HelloWorld',

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      seen:true,
      sites:[
          {text:'1'},
          {text:'2'},
          {text:'3'}
      ],
      hasFocus:"",
      current:"",
        comments:[
            {id:1,content:'JAVA'},
            {id:0,content:'PHP'},
            {id:3,content:'HTML'},
            {id:2,content:'CSS'}
        ]
    }
    
  },
  mehthods:{
    //删除所有数据的方法：
        alldelA(){
            this.comments=[];
        },
    //     //倒序排序的方法：
    //     sortA(){
    //         this.comments.sort((a,b)=>{
    //             return a.id<b.id;
    //         });
    //     },
    //     //反转数据：
    //     reverseA(){
    //         this.comments.reverse();
    //     },
    //     //增加数据的方法：
    //     pushA(type){
    //         var id=this.comments.length;
    //         var content={id:id,content:this.current};
    //         switch (type){
    //             case 'first':
    //                 this.comments.unshift(content);
    //                 break;
    //             case 'last':
    //                 this.comments.push(content);
    //                 break;
    //         }
    //         this.current="";
    //     },
    //     //删除数据的方法：
    //     delA(type){
    //         switch (type){
    //             case 'first':
    //                 this.comments.shift();
    //                 break;
    //             case 'last':
    //                 this.comments.pop();
    //                 break;
    //         }
    //     },
        //点击删除，删除对应的数据信息：
     removeA(k){
            this.comments.splice(k,1);
        }
  },
  mounted(){
  //  this.$hasFocus.id.focus();
     
  },
  component(){
   
  },
  watch: {
    
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.seen{
   width: 200px;
   height: 100px;
   border: 1px #000  solid;

}
.demo{
  width: 300px;
   height: 300px;
   border: 1px #000  solid;
}
</style>
